<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标哥哥的坦克大战</title>
    <style>
        /* 在正式的项目里面，初始化项目使用reset.css和normalize.css */
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .header {
            background-color: lightseagreen;
            height: 45px;
            font-size: 22px;
            font-weight: bold;
            /* 让文字左右，上下居中 */
            text-align: center;
            line-height: 45px;
        }

        .game-box {
            /* 固定定位，以浏览器为标准进行定位 */
            position: fixed;
            left: 0px;
            top: 45px;
            right: 0px;
            bottom: 0px;
        }

        #game {
            background-color: black;
        }

        #btn-start {
            position: absolute;
            left: 0;
            right: 0;
            margin: 200px auto;
            width: 100px;
            height: 35px;
            cursor: pointer;
            border: none;
            background-color: lightseagreen;
            font-size: 18px;
            color: white;
            box-shadow: 0 0 15px #e1e1e1;
            transition: all 0.5s linear;
            display: none;
        }

        #btn-start:hover {
            box-shadow: 0 0 15px deeppink;
        }
    </style>
</head>

<body>
    <div class="header">标哥哥的坦克大战</div>
    <div class="game-box">
        <!-- 画布，相当于模拟的屏幕，可以在屏幕上面展示任何东西 -->
        <canvas id="game"></canvas>
        <button type="button" id="btn-start">开始游戏</button>
    </div>
</body>
<script src="./js/Hero.js"></script>
<script src="./js/Bullet.js"></script>
<script src="./js/Enemy.js"></script>
<script src="./js/Boom.js"></script>
<script src="./js/EnemyBullet.js"></script>
<script src="./js/Tool.js"></script>
<script>
    const gameBox = document.querySelector(".game-box");
    
    const game = document.querySelector("#game");
    game.width = gameBox.clientWidth;
    game.height = gameBox.clientHeight;

    window.addEventListener("resize", event => {
        game.width = gameBox.clientWidth;
        game.height = gameBox.clientHeight;
    });

    const ctx = game.getContext("2d");

    const assets = [
        "./img/p1tankU.gif",
        "./img/p1tankD.gif",
        "./img/p1tankL.gif",
        "./img/p1tankR.gif",
        "./img/p2tankU.gif",
        "./img/p2tankD.gif",
        "./img/p2tankL.gif",
        "./img/p2tankR.gif",
        "./img/user_photo.jpg",
        "./img/fire_up.png",
        "./img/fire_down.png",
        "./img/fire_left.png",
        "./img/fire_right.png",
        "./img/enemy1U.gif",
        "./img/enemy1D.gif",
        "./img/enemy1L.gif",
        "./img/enemy1R.gif",
        "./img/boom1.png",
        "./img/boom2.png",
        "./img/boom3.png",
        "./img/boom4.png",
        "./img/boom5.png",
        "./img/boom6.png",
        "./img/boom7.png",
        "./img/enemymissile.gif",
        "./img/born1.gif",
        "./img/born2.gif",
        "./img/born3.gif",
        "./img/born4.gif",
        "./img/bomb.gif",
        "./img/timer.gif"
    ];
    const imgList = [];
    let loadCount = 0;
    for (let i = 0; i < assets.length; i++) {
        let img = new Image();
        img.src = assets[i];
        imgList.push(img);
        img.onload = function () {
            loadCount++;
            if (loadCount == assets.length) {
                console.log("资源加载完成，可以开始游戏了");
                initGame();
            }
        }
    }

    const bulletList = [];
    const keySet = new Set();
    let p1 = null;
    const boomList = [];
    const enemyBulletList = [];

    function initGame() {
        let btnStart = document.querySelector("#btn-start");
        btnStart.style.display = "unset";
        btnStart.addEventListener("click", event => {
            startGame();
            btnStart.remove();
        });
    }

    function startGame() {
        p1 = new Hero();
        p1.draw(ctx);

        document.onkeydown = function (event) {
            keySet.add(event.keyCode);
            console.log(event);
           
            if (event.keyCode === 74 && event.repeat === false) {
                p1.shoot();
            }

        }
        document.onkeyup = function (event) {
            keySet.delete(event.keyCode);
        }

        setInterval(function () {
            ctx.clearRect(0, 0, game.width, game.height);
            p1.draw(ctx);
            for (let i = bulletList.length - 1; i >= 0; i--) {
                bulletList[i].draw(ctx);
            }
            addEnemy();
            for (let i = enemyList.length - 1; i >= 0; i--) {
                enemyList[i].draw(ctx);
            }
            checkEnemyAndBulletCrash();
            for (let i = boomList.length - 1; i >= 0; i--) {
                boomList[i].draw(ctx);
            }
            for (let i = enemyBulletList.length - 1; i >= 0; i--) {
                enemyBulletList[i].draw(ctx);
            }

            checkP1AndEnemyBulletCrash();

            addTool();
            for (let i = toolList.length - 1; i >= 0; i--) {
                toolList[i].draw(ctx);
            }
            checkP1AndToolCrash();
            checkHeroBulletAndEnemyBulletCrash()

        }, 20);
    }

    const enemyList = [];
    function addEnemy() {
        if (enemyList.length < 10) {
            let count = 10 - enemyList.length;
            for (let i = 0; i < count; i++) {
                let e = new Enemy();
                enemyList.push(e);
            }
        }
    }


   
    function checkCrash(a, b) {
        if (a.x + a.width < b.x || b.x + b.width < a.x || a.y + a.height < b.y || b.y + b.height < a.y) {
            return false;
        }
        else {
            return true;
        }
    }

    function checkEnemyAndBulletCrash() {
        for (let i = bulletList.length - 1; i >= 0; i--) {
            for (let j = enemyList.length - 1; j >= 0; j--) {
                let b = bulletList[i];
                let e = enemyList[j];
                let flag = checkCrash(b, e);
                if (flag) {
                    bulletList.splice(i, 1);
                    enemyList.splice(j, 1);
                    let audio = new Audio();
                    audio.src = "./music/boom.mp3";
                    audio.load();
                    audio.play();
                    p1.score++;
                    let _boom = new Boom(e.x, e.y);
                    _boom.x = e.x + e.width / 2 - _boom.width / 2;
                    _boom.y = e.y + e.height / 2 - _boom.height / 2;
                    boomList.push(_boom);

                    break;
                }
            }
        }
    }

    function checkP1AndEnemyBulletCrash() {
        if (!p1) {
            return;
        }
        for (let i = enemyBulletList.length - 1; i >= 0; i--) {
            let a = enemyBulletList[i];
            let result = checkCrash(a, p1);
            if (result) {
                p1.HP -= ~~(Math.random() * 20);
                if (p1.HP <= 0) {
                    if (confirm("你已经死了，是否重新开始")) {
                        location.reload();
                    }
                    else {
                        window.close();
                    }
                }
                enemyBulletList.splice(i, 1);
            }
        }
    }

    const toolList = [];
    function addTool() {
        if (toolList.length < 2) {
            let temp = ~~(Math.random() * 1000);
            if (temp < 2) {
                let t = new Tool();
                toolList.push(t);

            }
        }
    }

    function checkP1AndToolCrash() {
        if (!p1) {
            return;
        }
        for (let i = toolList.length - 1; i >= 0; i--) {
            let t = toolList[i];
            let result = checkCrash(t, p1);
            if (result) {
                if (t.type === 0) {
                    for (let j = enemyList.length - 1; j >= 0; j--) {
                        p1.score++;
                        let e = enemyList[j];
                        let _boom = new Boom(e.x, e.y);
                        _boom.x = e.x + e.width / 2 - _boom.width / 2;
                        _boom.y = e.y + e.height / 2 - _boom.height / 2;
                        boomList.push(_boom);
                        enemyList.splice(j);
                    }
                    let audio = new Audio();
                    audio.src = "./music/boom.mp3";
                    audio.load();
                    audio.play();
                }
                else if (t.type === 1) {
                    for (let j = enemyList.length - 1; j >= 0; j--) {
                        enemyList[j]._speed = enemyList[j].speed
                        enemyList[j].speed = 0;
                    }
                    setTimeout(() => {
                        for (let j = enemyList.length - 1; j >= 0; j--) {
                            enemyList[j].speed = enemyList[j]._speed
                        }
                    }, 5000);
                }
                toolList.splice(i, 1);
            }
        }
    }

    function checkHeroBulletAndEnemyBulletCrash() {
        for (let i = bulletList.length - 1; i >= 0; i--) {
            for (let j = enemyBulletList.length - 1; j >= 0; j--) {
                let result = checkCrash(bulletList[i], enemyBulletList[j]);
                if (result) {
                    bulletList.splice(i, 1);
                    enemyBulletList.splice(j, 1);
                    break;
                }
            }
        }
    }
</script>

</html>